<template>
  <c-container class="applicatList" direction="vertical">
    <c-main style="padding:10px 40px 20px 20px;">
      <c-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        style="margin-bottom:15px"
        @click="handleBtns('', 1, 'newAddApplicat')"
      >
        创建应用
      </c-button>
      <c-table
        :data="tableData"
        border
        stripe
        header-cell-class-name="text-center"
        style="width: 100%"
      >
        <c-table-column label="序号" align="center" width="60">
          <template slot-scope="scope">
            {{ scope.$index + (pagination.start - 1) * pagination.limit + 1 }}
          </template>
        </c-table-column>
        <c-table-column
          prop="appName"
          label="应用名称"
          align="left"
          sortable
          show-overflow-tooltip
        ></c-table-column>
        <c-table-column
          prop="clientId"
          label="client ID"
          align="left"
          sortable
          show-overflow-tooltip
        ></c-table-column>
        <c-table-column
          prop="resource"
          label="资源id"
          align="left"
          sortable
          show-overflow-tooltip
        ></c-table-column>
        <c-table-column
          prop="authorizedGrantTypes"
          label="授权模式"
          align="left"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.authorizedGrantTypes.join('，') }}</span>
          </template>
        </c-table-column>
        <c-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <c-tooltip
              class="item"
              effect="dark"
              content="查看详情"
              placement="top"
            >
              <c-button
                class="btn-list"
                @click.native.prevent="
                  handleBtns(scope.row, 3, 'seeApplicatInfo')
                "
                type="text"
                icon="el-icon-view"
              ></c-button>
            </c-tooltip>
            <c-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <c-button
                class="btn-list"
                @click.native.prevent="handleBtns(scope.row, 2, 'editApplicat')"
                type="text"
                icon="el-icon-edit-outline"
              ></c-button>
            </c-tooltip>
            <c-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <c-button
                @click.native.prevent="handleDelete(scope.row)"
                type="text"
                icon="el-icon-delete"
                class="text-danger btn-list"
                :disabled="scope.row.projectIds ? true : false"
                :class="scope.row.projectIds ? 'btn-diabled' : ''"
              ></c-button>
            </c-tooltip>
          </template>
        </c-table-column>
      </c-table>
      <c-pagination
        style="margin:22px 0;text-align:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.start"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, slot,sizes,slot,prev, pager, next, jumper"
        :total="total"
      >
        <template></template>
      </c-pagination>
    </c-main>
  </c-container>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'applicatList',
  data() {
    return {
      pagination: {
        limit: 10,
        start: 1
      },
      total: 0,
      tableData: []
    }
  },
  activated() {
    this.getdataList()
  },
  methods: {
    // 获取列表
    getdataList() {
      const patams = {
        limit: this.pagination.limit,
        start: this.pagination.start
      }
      request({
        url: '/v1/yq/sysApp/querySysAppPage',
        params: patams
      }).then(res => {
        this.tableData = res.data
        this.total = res.totalCount
      })
    },

    handleSizeChange(val) {
      this.pagination.limit = val
      this.getdataList()
    },
    handleCurrentChange(val) {
      this.pagination.start = val
      this.getdataList()
    },
    // 创建-1 编辑-2、查看详情-3
    handleBtns(row, type, name) {
      if (row && row !== '') {
        this.$router.push({
          path: `/siteconfig/thirdmanage/src/${name}/${row.clientId}/${type}`
        })
      } else {
        this.$router.push({
          path: `/siteconfig/thirdmanage/src/${name}/${type}`
        })
      }
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.handleDeleteApi(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除api
    handleDeleteApi(row) {
      const params = {
        clientId: row.clientId
      }
      request({
        url: '/v1/yq/sysApp/deleteSysApp',
        params: params
      }).then(() => {
        this.$message.success('删除成功')
        this.getdataList()
      })
    }
  }
}
</script>

<style lang="scss">
.applicatList {
  .el-button [class*='el-icon-'] + span {
    margin-left: 0 !important;
  }
  .el-icon-circle-plus-outline {
    margin-right: 0 !important;
  }
  .text-center {
    text-align: center !important;
  }
  .text-danger {
    i {
      color: #f56c6c !important;
    }
  }
  .btn-list.el-button {
    padding: 10px 5px !important;
  }
  .btn-diabled {
    i {
      color: #c0c4cc !important;
    }
  }
}
</style>
